import faker from "faker";
import {FixedSizeList} from "react-window"
import {FiX} from "react-icons/fi";

const bigList = [...Array(5000)].map(() => {
    name: faker.name.findName();
    email: faker.internet.email();
    avatar: faker.internet.avatar();
})

function Ls(){
    const renderRow = ({index, style}) => (
        <div style={{...style, ...{display: 'flex'}}}>
            <img src={bigList[index].avator} alt={bigList[index].name} width={50}/>
            <p>{bigList[index].name} - {bigList[index].email}</p>
        </div>
    )

    // const renderItem = item => (
    //     <div style={{display: "flex"}}>
    //         <img src={item.avatar} alt={item.name} width={50}/>
    //         <p>{item.name} - {item.email}</p>
    //     </div>
    // )

    // return <List data={bigList} renderItem={renderItem} />

    return (
        <FixedSizeList height={window.innerHeight} width={window.innerWidth - 20} itemCount={bigList.length} itemSize={50}>{renderRow}</FixedSizeList>
    )

}
